import Login from './login.js';
let { form, $, layer } = layui;
export default class Reg {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let template = `
        <style>
            .card{
                width: 600px;
                margin:auto;
            }
        </style>
        <div class="layui-card card">
        <div class="layui-card-header">注册</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="username"
                            required
                            lay-verify="required|username"
                            placeholder="请输入标题"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input
                            type="password"
                            name="pwd"
                            required
                            lay-verify="required"
                            placeholder="请输入密码"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-block">
                        <input
                            type="password"
                            name="confirm"
                            required
                            lay-verify="required"
                            placeholder="请输入密码"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button
                            class="layui-btn"
                            lay-submit
                            lay-filter="regForm"
                        >
                            立即提交
                        </button>
                        <button
                            type="reset"
                            class="layui-btn layui-btn-primary"
                        >
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
        `;
        $("#root").html(template);
    }
    handle() {
        form.verify({
            username:function(value,item){
                let msg = "";
                console.log(aaa);
                if(!/^\w{6,20}$/.test(value)){
                    return "用户名格式不正确";
                }
                $.ajax({
                    async:false,
                    type:"post",
                    url:"/users/usernameExist",
                    data:{
                        username:value
                    },success(res){
                        if(res.status == 0){
                            msg = "用户名已存在";
                        }
                    }
                });
                return msg;
            }
        });
        form.on('submit(regForm)',function(data){
            console.log("submit",data.field);
            $.ajax({
                type:"post",
                url:"/users/reg",
                data:data.field,
                success(){
                    layer.msg("注册成功");
                    // new Login();
                    location.href = "#login";
                }
            });
            return false;
        });
    }
}
